<template>
	<view>
		<input type="text" v-model="formData.inp">
		<textarea v-model="formData.text"></textarea>
		<radio-group @change="radioChange">
			<radio value="男" :checked="formData.sex=='男'">男</radio>
			<radio value="女" :checked="formData.sex=='女'">女</radio>
		</radio-group>
		<checkbox-group @change="checkboxChange">
			篮球：<checkbox value="篮球"></checkbox>
			足球：<checkbox value="足球"></checkbox>
			乒乓球：<checkbox value="乒乓球"></checkbox>
		</checkbox-group>
		<button @click="getData">点击</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					inp:'',
					text:'',
					sex:'女',
					hobby:[]
				}
			}
		},
		methods: {
			getData(){
				console.log(this.formData)
			},
			radioChange(event){
				console.log(event.detail)
				this.formData.sex=event.detail.value
			},
			checkboxChange(event){
				console.log(event.detail)
				this.formData.hobby=event.detail.value
			}
		}
	}
</script>

<style>
input,textarea{border: 1px solid red;}
</style>
